<template>
  <div id="tab-bar-item" @click="itemClick">
    <div class="item-img" v-show="!isActive">
      <slot name="item-img"></slot>
    </div>
    <div class="item-img-act" v-show="isActive">
      <slot name="item-img-act"></slot>
    </div>
    <div class="item-text" :style="activeColor">
      <slot name="item-text"></slot>
    </div>  
  </div>
</template>
<script>
export default {
  name: "TabBarItem",
  props:{
    link:{
      type: String,
      required:true
    },
    color:{
      type: String,
      default: "red"
    }
  },
  computed:{
    isActive(){
      return this.$route.path.indexOf(this.link) !== -1;
    },
    activeColor(){
      return this.isActive ? {"color": this.color} : {}
    }
  },
  data () {
    return {
    };
  },
  methods: {
    itemClick(){
      this.$router.replace({path: this.link})
    }
  }
}
</script>
<style>
  #tab-bar-item {
    flex: 1;
  }

  .item-img img, .item-img-act img{
    width: 24px;
    height: 24px;
    margin-top: 5px;
    vertical-align: middle;
  }

  .item-text{
    font-size: 12px;
    margin-top: 3px;
    color: #333; 
  }

</style>